웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > jquery

[제이쿼리] 이벤트 mouseup 그리고 click 이벤트의 차이점은?

Last Modified : 2017-08-28 / Created : 2016-02-01
4,580
View Count
자바스크립트의 이벤트는 이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는 click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는 mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.


왜 이런 궁금증이 생기는가...??
클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.

일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.

<script type="text/javascript">
/* 클릭 이벤트 함수 */
$('선택한 요소').on('click', function() {
 ...
});

/* 마우스업 이벤트 함수 */
$('선택한 요소').on('mouseup', function() {
 ...
});
</script>


결론부터 얘기하면 이 둘의 사용상에 있어 아주 큰 차이점은 찾기 어려운 것 같습니다. 이론적으로 접근하면 클릭 이벤트는 하나의 대상(Element)에 대하여 이벤트를 발생하기 위함일 수 있겠고 mouseup 또는 mousedown 이벤트의 경우 특정 요소와는 상관없이 오직 이벤트를 위해서 만들어졌다고 생각할 수 있을 것 같습니다.

이 두 개념이 무엇이 맞다라고 말하기 어려운 이유 중 다른 하나가 바로 제이쿼리의 mouseup, mousedown, click 이벤트가 자바스크립트의 mouseup, mousedown, click과는 동일하다 볼 수 없기 때문입니다. 즉, jQuery api 명세에서 말하는 각각의 이벤트 설명이 자바스크립트를 의미한다 볼 수는 없는 것이지요. 하지만 대부분 이 둘을 혼동하고 설명하는 경우가 많습니다.

Previous

[제이쿼리 UI] 캘린더 UI datepicker 한글로 변경하기, 로컬라이제이션

Previous

[제이쿼리] 이벤트 요소 가져오는 방법, event.target